<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PPress - 安装</title>
    <script>
        {{ tailwind_content|safe }}
    </script>
    <style>
        /* Logo 样式 */
        .logo-circle {
            position: relative;
            overflow: hidden;
            transform: translateZ(0);
            background: linear-gradient(135deg, #0180FF, #0178FF);
        }
        
        .logo-circle::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 60%);
            z-index: 1;
            border-radius: 9999px;
        }
        
        .logo-circle:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(1, 128, 255, 0.6);
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="min-h-screen flex flex-col">
        <!-- Logo 区域 -->
        <div class="flex flex-col items-center py-8 space-y-4">
            <!-- Logo -->
            <div class="logo-circle w-16 h-16 rounded-full flex items-center justify-center text-white font-bold text-3xl transition-all duration-300">
                P
            </div>
            <!-- 标题 -->
            <div class="text-center">
                <h1 class="text-3xl font-bold text-gray-800">PPress</h1>
                <p class="mt-2 text-sm text-gray-600">基于 Flask 的轻量级博客系统</p>
            </div>
        </div>

        <!-- 安装表单 -->
        <div class="flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8">
            <div class="max-w-md w-full space-y-8">
                {% if error %}
                <div class="bg-red-50 border-l-4 border-red-400 p-4 rounded-lg">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="h-5 w-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                            </svg>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-red-700">{{ error }}</p>
                        </div>
                    </div>
                </div>
                {% endif %}

                <form id="installForm" class="mt-8 space-y-6" method="POST">
                    <!-- 添加 CSRF token -->
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    
                    <!-- 网站设置 -->
                    <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">网站名称</label>
                                <input type="text" name="site_name" required
                                       placeholder="请输入网站名称"
                                       class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">数据库类型</label>
                                <select name="db_type" id="dbType" onchange="toggleMySQLConfig()"
                                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    <option value="sqlite">SQLite</option>
                                    <option value="mysql">MySQL (推荐)</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- MySQL 配置 -->
                    <div id="mysqlConfig" class="hidden bg-white p-6 rounded-lg shadow-sm border border-gray-100 space-y-4">
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">主机地址</label>
                                <input type="text" name="mysql_host" value="localhost"
                                       class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">端口</label>
                                <input type="number" name="mysql_port" value="3306"
                                       class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">数据库名</label>
                            <input type="text" name="mysql_database" value="PPress"
                                   placeholder="只能包含字母、数字和下划线"
                                   pattern="[a-zA-Z0-9_]+"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <p class="mt-1 text-xs text-gray-500">只能包含字母、数字和下划线</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">用户名</label>
                            <input type="text" name="mysql_user"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">密码</label>
                            <input type="password" name="mysql_password"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                    </div>

                    <div>
                        <button type="submit"
                                class="w-full flex justify-center items-center px-4 py-3 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            开始安装
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 页脚版权信息 -->
        <div class="py-8 text-center text-sm text-gray-500">
            <p onclick="window.location.href=' https://gitee.com/fojie/'">PPress - Flask Blog or Content Management System</p>
            <p class="mt-1" onclick="window.location.href=' https://gitee.com/fojie/'">PPress 2024 版权所有 (c) 言道子</p>
        </div>
    </div>

    <!-- 添加 Alert 组件 -->
    <div id="alert" class="fixed inset-0 flex items-center justify-center z-50 hidden">
        <div class="absolute inset-0 bg-black opacity-50"></div>
        <div class="relative bg-white rounded-lg p-6 max-w-sm w-full mx-4">
            <div id="alertIcon" class="mx-auto flex items-center justify-center h-12 w-12 rounded-full mb-4"></div>
            <div id="alertTitle" class="text-lg font-medium text-center mb-2"></div>
            <div id="alertMessage" class="text-sm text-gray-500 text-center mb-4"></div>
            <div id="alertButtons" class="flex justify-center space-x-4">
                <button id="alertConfirm" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">确定</button>
                <button id="alertCancel" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 hidden">取消</button>
            </div>
        </div>
    </div>

    <script>
    // Alert 组件
    function showAlert(message, type = 'info', title = null, callback = null, showCancel = false) {
        const alert = document.getElementById('alert');
        const alertIcon = document.getElementById('alertIcon');
        const alertTitle = document.getElementById('alertTitle');
        const alertMessage = document.getElementById('alertMessage');
        const alertConfirm = document.getElementById('alertConfirm');
        const alertCancel = document.getElementById('alertCancel');

        // 设置图标和颜色
        const icons = {
            'success': '<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>',
            'error': '<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>',
            'warning': '<svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>',
            'info': '<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'
        };

        alertIcon.innerHTML = icons[type];
        alertTitle.textContent = title || type.charAt(0).toUpperCase() + type.slice(1);
        alertMessage.textContent = message;
        
        // 显示/隐藏取消按钮
        alertCancel.classList.toggle('hidden', !showCancel);
        
        // 绑定回调
        alertConfirm.onclick = () => {
            alert.classList.add('hidden');
            if (callback) callback(true);
        };
        alertCancel.onclick = () => {
            alert.classList.add('hidden');
            if (callback) callback(false);
        };
        
        alert.classList.remove('hidden');
    }

    // 表单提交处理
    document.getElementById('installForm').onsubmit = function(e) {
        e.preventDefault();
        
        // 显示加载提示
        showAlert('正在安装中...', 'info', null, null, false);
        
        fetch(this.action, {
            method: 'POST',
            body: new FormData(this),
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert(data.message, 'success', '成功');
                setTimeout(() => {
                    window.location.href = data.redirect_url;
                }, 5000);
            } else {
                showAlert(data.message, 'error', '错误');
            }
        })
        .catch(error => {
            showAlert('安装失败: ' + error, 'error', '错误');
        });
        
        return false;
    };

    // MySQL 配置显示/隐藏
    function toggleMySQLConfig() {
        const dbType = document.getElementById('dbType').value;
        const mysqlConfig = document.getElementById('mysqlConfig');
        
        if (dbType === 'mysql') {
            mysqlConfig.classList.remove('hidden');
        } else {
            mysqlConfig.classList.add('hidden');
        }
    }
    </script>
</body>
</html> 